import { defineComponent, onMounted, ref, computed } from 'vue';
import deepcopy from 'deepcopy';
import { dragActionBarHandle } from "./dragActionBar.js";
import { useCommands } from './useCommands.js';
import { $dialog } from '../../components/dialog/dialog.jsx';

export const pageList = ref(['首页', '个人中心', '详情页面', '列表页面', '新闻页面']);

export default defineComponent({
    props: {
        modelValue: {
            type: Object,
            default: () => {}
        },
        focusIndex: {
            type: Object,
            default: () => {}
        },
    },
    emit: ["update:modelValue"],
    setup(props, ctx) {
        let Data = computed({
            get() { return props.modelValue; },
            set(value) { ctx.emit("update:modelValue", deepcopy(value)); }
        })

        const {menuRef,
            actionBarRef,
            isShowActionBar,
            actionBarLeft,
            actionBarTop,
            state,
            clickMenu,
            mousedown
        } = dragActionBarHandle()

        const actionBarIconList = [
            'icon-chexiao',
            'icon-houtui',
            'icon-daoruwenjian',
            'icon-daochuwenjian',
            'icon-shanchu',
            'icon-icon-',
            // "icon-tianjia",
            'icon-daima'
        ]

        onMounted(() => {
            state.width = actionBarRef.value.offsetWidth
            actionBarLeft.value = menuRef.value.getBoundingClientRect().left - state.width;
            actionBarTop.value = 70;
        })

        const { commands } = useCommands(Data, props.focusIndex)
        const clickActionBarBtn = (index) => {
            switch (index) {
                case 0:
                    commands.backoff()
                    break;
                case 1:
                    commands.forward()
                    break;
                case 2:
                    $dialog({
                        title: '导入JSON',
                        content: '',
                        footer: true,
                        rows: 10,
                        callback: (text) => {
                            commands.import(JSON.parse(text))
                        }
                    })
                    break;
                case 3:
                    $dialog({
                        title: '导出JSON',
                        rows: 10,
                        content: JSON.stringify(props.modelValue),
                    })
                    break;
                case 4:
                    commands.delete()
                    break;
                case 5:
                    localStorage.setItem("data", JSON.stringify(props.modelValue));
                    window.open(
                        location.origin + "/iframe?type=computer",
                        "_blank",
                    )
                    // window.open(
                        // "http://localhost:666/browse",
                        // "_blank",
                        // "width=420,height=812,menubar=yes,status=yes,location=no"
                    // )
                    // titlebar=yes,menubar=yes,toolbar=yes,status=yes,scrollbars=yes,resizable=yes,location=yes
                    // top=0 窗口距离屏幕上方的象素值；
                    // left=0 窗口距离屏幕左侧的象素值；
                    // titlebar=no 是否显示标题栏，被忽略，除非调用HTML应用程序或一个值得信赖的对话框.默认值是yes；
                    // menubar=no 表示菜单栏，默认值是yes；
                    // scrollbars=yes 是否显示滚动条，默认值是yes；
                    // resizable=no 是否允许改变窗口大小，默认值是yes；
                    // status=no 是否要添加一个状态栏，默认值是yes；
                    // toolbar=no 是否显示工具栏，默认值是yes；
                    // location=no 是否显示地址栏，默认值是yes；
                    break;
                case 6:
                    // $dialog({
                    //     title: '新建页面',
                    //     content: '',
                    //     footer: true,
                    //     rows: 1,
                    //     callback: (text) => {
                    //         pageList.value.push(text)
                    //     }
                    // })
                    break;
                default:
                    break;
            }
        }

        return () => (<>
            <div ref={menuRef} class={['page_menu', { active: isShowActionBar.value }]} onClick={() => clickMenu()}>
                <i class="iconfont icon-lanmu"></i>
            </div>
            <div class="action_bar" style={
                {
                    left: actionBarLeft.value + 'px',
                    top: actionBarTop.value + 'px'
                }
            }
                v-show={isShowActionBar.value}
                ref={actionBarRef}
            >
            {
                actionBarIconList.map((item, index) => {
                    return <div
                        class="action_bar_icon"
                        key={index}
                        onClick={() => clickActionBarBtn(index)}
                    >
                        <i class={['iconfont', item]}></i>
                    </div>
                })
            }
                <span onMousedown={(e) =>mousedown(e)} class="drag">· · ·</span>
            </div>
        </>
        )
    }
})